<template>
  <div>
    <!--进行添加总表的card-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float:left;">
          <font size="2" color="red">进货单号{{purchaseNumber}}</font>
        </span>
      </div>
      <div class="text item">
        <el-form :model="sale" inline>
          <el-form-item label="供应商:">
            <el-select size="mini" v-model="sale.supplierId" placeholder="请选择">
              <el-option
                v-for="customer in customers"
                :key="customer.id"
                :label="customer.name"
                :value="customer.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应付金额:">
            <el-input size="mini" v-model="sale.amountPayable"></el-input>
          </el-form-item>
          <el-form-item label="实付金额:">
            <el-input size="mini" v-model="sale.amountPaid"></el-input>
          </el-form-item>
          <el-form-item label="收货日期:">
            <el-date-picker
              size="mini"
              v-model="sale.purchaseDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <br />
          <el-form-item label="备注:">
            <el-input size="mini" v-model="sale.remarks" style="width:600px;"></el-input>
          </el-form-item>
          <el-form-item label="是否付款:">
            <el-select size="mini" v-model="sale.state">
              <el-option label="未付" value="1"></el-option>
              <el-option label="已付" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button
              type="success"
              size="mini"
              round
              icon="el-icon-circle-plus-outline"
              @click="addsale"
            >保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 显示销售详情表信息的card -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float:left;">
          <el-button type="text" icon="el-icon-circle-plus-outline" @click="toaddgoods">添加</el-button>
          <el-button type="text" icon="el-icon-setting" @click="toupgoods">修改</el-button>
          <el-button type="text" icon="el-icon-delete" @click="delgoods">删除</el-button>
        </span>
      </div>
      <div class="text item">
        <el-table
          ref="singleTable"
          :data="salegoodsList"
          highlight-current-row
          style="width: 100%"
          @row-click="goodslistrow"
          :row-class-name="tableRowClassName"
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column property="code" label="商品编号" width="120"></el-table-column>
          <el-table-column property="name" label="商品名称" show-overflow-tooltip></el-table-column>
          <el-table-column property="model" label="型号" width="120"></el-table-column>
          <el-table-column property="unit" label="单位" width="120"></el-table-column>
          <el-table-column property="price" label="销售单价" width="120"></el-table-column>
          <el-table-column property="num" label="数量" width="120"></el-table-column>
          <el-table-column property="total" label="总金额" width="120"></el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 添加goods的对话框 -->
    <el-dialog title="进货入库商品选择" :visible.sync="dialogFormVisible" width="1200px" class="dialog">
      <el-container>
        <el-header>搜索功能</el-header>
        <el-container>
          <el-aside width="200px">
            <el-header style="height:30px;border:none;">
              <b>商品类别</b>
            </el-header>
            <el-tree :data="goodstyle" node-key="id" @current-change="handleNodeClick"></el-tree>
          </el-aside>
          <el-container>
            <el-main>
              <p style="text-align:left;margin-top:-15px;">
                <b>选择商品</b>
              </p>
              <el-table
                ref="singleTable"
                :data="goodslist"
                highlight-current-row
                style="width: 100%"
                @cell-dblclick="goodtabledouble"
              >
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column property="code" label="商品编号" width="120"></el-table-column>
                <el-table-column property="name" label="商品名称" show-overflow-tooltip></el-table-column>
                <el-table-column property="model" label="型号" width="120"></el-table-column>
                <el-table-column property="unit" label="单位" width="120"></el-table-column>
                <el-table-column property="purchasingPrice" label="成本均价" width="120"></el-table-column>
                <el-table-column property="price" label="销售单价" width="120"></el-table-column>
                <el-table-column property="inventoryQuantity" label="库存数量" width="120"></el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination1.pageNum"
                :page-sizes="[3, 4, 5, 6]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination1.total"
              ></el-pagination>
            </el-main>
          </el-container>
        </el-container>
      </el-container>
      <!-- 内部选择商品数量。单价的对话框 -->
      <el-dialog
        append-to-body
        title="选择商品"
        :visible.sync="dialogFormVisible2"
        width="700px"
        class="dialog"
        @close="cleargoods"
      >
        <el-form inline :model="goods">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <p>商品信息</p>
            </div>
            <div class="text item">
              <el-form-item label="商品编号">
                <el-input size="mini" v-model="goods.code" disabled></el-input>
              </el-form-item>
              <el-form-item label="商品名称">
                <el-input size="mini" v-model="goods.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="商品型号">
                <el-input size="mini" v-model="goods.model" disabled></el-input>
              </el-form-item>
              <el-form-item label="商品单位">
                <el-input size="mini" v-model="goods.unit" disabled></el-input>
              </el-form-item>
              <el-form-item label="销售单价">
                <el-input type="text" size="mini" v-model="goods.price" disabled></el-input>
              </el-form-item>
              <el-form-item label="当前库存">
                <el-input size="mini" v-model="goods.inventoryQuantity" disabled></el-input>
              </el-form-item>
            </div>
          </el-card>
          <div class="card_bottom">
            <el-form-item label="单价">
              <el-input-number
                controls-position="right"
                size="mini"
                v-model="goods.price"
                @change="pricechange"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="数量">
              <el-input-number
                v-model="goods.num"
                controls-position="right"
                size="mini"
                :min="1"
                @change="numstock"
              ></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="success" size="mini" @click="addgoods">保存</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-dialog>
    </el-dialog>
    <!-- 修改goodslist的对话框 -->
    <el-dialog
      append-to-body
      title="修改商品"
      :visible.sync="dialogFormVisible3"
      width="700px"
      class="dialog"
      @close="cleargoods"
    >
      <el-form inline :model="goods">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <p>商品信息</p>
          </div>
          <div class="text item">
            <el-form-item label="商品编号">
              <el-input size="mini" v-model="goods.code" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input size="mini" v-model="goods.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品型号">
              <el-input size="mini" v-model="goods.model" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品单位">
              <el-input size="mini" v-model="goods.unit" disabled></el-input>
            </el-form-item>
            <el-form-item label="销售单价">
              <el-input type="text" size="mini" v-model="goods.sellingPrice" disabled></el-input>
            </el-form-item>
            <el-form-item label="当前库存">
              <el-input size="mini" v-model="goods.inventoryQuantity" disabled></el-input>
            </el-form-item>
          </div>
        </el-card>
        <div class="card_bottom">
          <el-form-item label="单价">
            <el-input size="mini" v-model="goods.price"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input-number
              v-model="goods.num"
              controls-position="right"
              size="mini"
              :min="1"
              :max="goods.inventoryQuantity"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="mini" @click="upgoods">修改</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sale: {}, //销售表对象
      purchaseNumber: "", //销售随机单号
      customers: [], //客户集合
      salegoodsList: [], //销售详情表集合
      dialogFormVisible: false, //商品选择弹出框弹出变量
      dialogFormVisible2: false, //商品数量选择弹出框弹出变量
      dialogFormVisible3: false, //商品详情修改弹出框弹出变量
      goodstyle: [], //商品类型集合
      goodslist: [], //商品集合
      pagination1: {}, //分页+商品模糊
      goods: {} //商品对象
    };
  },
  mounted() {
    this.getPurchaseNumber();
    this.getcustomers();
  },
  methods: {
    pricechange(currentValue, oldValue) {
      this.goods.lastPurchasingPrice = currentValue;
    },
    numstock(currentValue, oldValue) {
      this.goods.inventoryQuantity += currentValue;
    },
    addsale() {
      if (this.salegoodsList.length == 0) {
        this.$message({
          message: "至少选择一个商品",
          type: "warning"
        });
      } else {
        this.sale.purchaseListGoodsJSON = JSON.stringify(this.salegoodsList);
        this.sale.access_token = localStorage.getItem("access_token");
        this.sale.userId = localStorage.getItem("userId");
        console.log("最终要添加的对象", this.sale);
        var tgoods = {};
        tgoods.access_token = localStorage.getItem("access_token");
        tgoods.goodsJson = JSON.stringify(this.salegoodsList);
        this.axios({
          method: "post",
          url: this.requestUrl + "inventory/inventory/tGoods/up",
          data: this.qs.stringify(tgoods)
        }).then(res => {
          if (res.data.code == 200) {
            console.log("仓库更新成功")
          }
        });
        this.axios({
          method: "post",
          url: this.requestUrl + "purchase/purchase/tPurchaseList/purchaseAdd",
          data: this.qs.stringify(this.sale)
        }).then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: "success"
            });
            this.sale = {};
            this.salegoodsList = [];
          }
        });
      }
    },
    delgoods() {
      this.salegoodsList.splice(this.goods.index, 1);
      this.gettotalprice();
    },
    gettotalprice() {
      let total = 0;
      this.salegoodsList.forEach(function(item, index) {
        total += item.total;
      });
      this.sale.amountPayable = total;
      this.sale.amountPaid = total;
    },
    cleargoods() {
      this.gettotalprice();
      this.goods = {};
    },
    upgoods() {
      this.goods.total =
        parseFloat(this.goods.num) * parseFloat(this.goods.price);
      this.salegoodsList.splice(this.goods.index, 1, this.goods);
      this.dialogFormVisible3 = false;
    },
    toupgoods() {
      this.dialogFormVisible3 = true;
    },
    tableRowClassName({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    goodslistrow(row, column, event) {
      console.log("选中详情行的信息", row);
      this.goods = JSON.parse(JSON.stringify(row));
      this.goods.flag = true;
    },
    addgoods() {
      this.goods.total =
        parseFloat(this.goods.num) * parseFloat(this.goods.price);
      this.goods.goodsId = this.goods.id;
      this.salegoodsList.push(this.goods);
      this.dialogFormVisible = false;
      this.dialogFormVisible2 = false;
    },
    goodtabledouble(row, column, cell, event) {
      console.log("goods 行row", row);
      this.goods = JSON.parse(JSON.stringify(row));
      this.goods.price = this.goods.sellingPrice;
      this.goods.num = 1;
      this.dialogFormVisible2 = true;
    },
    handleSizeChange(val) {
      this.getgoods(this.pagination1.pageNum, val);
    },
    handleCurrentChange(val) {
      this.getgoods(val, this.pagination1.pageSize);
    },
    getgoods(pageNum, pageSize) {
      this.pagination1.pageNum = pageNum;
      this.pagination1.pageSize = pageSize;
      this.pagination1.access_token = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: this.requestUrl + "inventory/inventory/tGoods/list",
        params: this.pagination1
      }).then(res => {
        console.log("获取的商品信息", res.data.obj);
        this.goodslist = res.data.obj.list;
        this.pagination1.total = res.data.obj.total;
      });
    },
    handleNodeClick(data, node) {
      console.log("当前节点数据", data);
      this.pagination1.typeId = data.id;
      if (data.id == "1") {
        this.pagination1.typeId = "";
      }
      this.getgoods(1, 3);
    },

    toaddgoods() {
      this.dialogFormVisible = true;
      this.axios({
        method: "get",
        url: this.requestUrl + "inventory/inventory/tGoodstype/tree",
        params: {
          access_token: localStorage.getItem("access_token")
        }
      }).then(res => {
        console.log("获取的tree数据", res.data.obj);
        this.goodstyle = res.data.obj;
      });
      this.getgoods(1, 3);
    },
    getPurchaseNumber() {
      this.axios({
        method: "get",
        url: this.requestUrl + "purchase/purchase/tPurchaseList/number",
        params: {
          access_token: localStorage.getItem("access_token")
        }
      }).then(res => {
        console.log("返回的随机进货订单号为：", res.data.obj);
        this.purchaseNumber = res.data.obj;
        this.sale.purchaseNumber = this.purchaseNumber;
      });
    },
    getcustomers() {
      this.axios({
        method: "get",
        url: this.requestUrl + "purchase/purchase/tPurchaseList/supplierList",
        params: {
          access_token: localStorage.getItem("access_token")
        }
      }).then(res => {
        console.log("返回的客户列表是", res.data.obj);
        this.customers = res.data.obj;
      });
    }
  }
};
</script>
<style scoped>
.card_bottom {
  height: 20px;
  padding-top: 40px;
  display: flex;
  justify-content: center; /*水平居中对齐*/
  align-items: center;
}
.dialog {
  background: -webkit-linear-gradient(
      bottom,
      hsla(255, 2%, 55%, 0.15),
      hsla(105, 2%, 51%, 0.5),
      rgba(128, 125, 125, 0.5)
    )
    no-repeat;
}
.el-form-item {
  float: left;
}
.el-header,
.el-footer {
  background-color: rgba(69, 106, 209, 0.1);
  display: flex;
  flex-direction: column; /*元素的排列方向为垂直*/
  justify-content: center; /*水平居中对齐*/
  align-items: left;
  font-size: 15px;
  border: 2px solid rgba(69, 106, 209, 0.5);
}

.el-aside {
  text-align: left;
  height: 300px;
  border: 2px solid rgba(69, 106, 209, 0.5);
}

.el-main {
  text-align: center;
  height: 300px;
  border: 2px solid rgba(69, 106, 209, 0.5);
}
</style>